<!-- 
# 组件设置规则说明

## 分钟字段
- 选择小时时间段00:00-23:59，开始时间可以选任意时分，结束时间只能任意小时的59分，如01:59,11:59。
- 可以设置间隔时间步长为5分钟。

## 小时字段
- 分为指定与不指定情况：
  - 指定时候步长为1小时。
  - 不指定时候可以先选择时间段（时间段规则设置同分钟），再选择间隔时间，如01:00-02:00，每间隔5分钟。

## 日字段
- 支持选择00:00-23:59任意时间段。

## 周字段
- 支持选择周一至周日00:00-23:59任意时间段。

## 月字段
- 支持选择1号到31号 00:00-23:59任意时间段。

## 年字段
- 支持选择 1月到12月 1号到31号 00:00-23:59任意时间段。

# cron 表达式拼接说明

cron 表达式由 6 个字段组成，每个字段之间用空格分隔，格式如下：

- 00：表示秒，由于我们组件不涉及秒级，所以固定为 00。
- minute：表示分钟，取值范围为 0-59。
- hour：表示小时，取值范围为 0-23。
- day：表示天，取值范围为 1-31。
- month：表示月，取值范围为 1-12。
- week：表示星期，取值范围为 1-7，1 表示星期日，7 表示星期六，以此类推。

## 示例 cron 表达式

- 每天的10点到20点之间，每10分钟执行一次任务：`0 0/10 10-20 * * *`
- 每周一到周五的上午9点执行：`0 0 9 * * 1-5`
- 每月的第一天的凌晨2点执行：`0 0 2 1 * *`
- 每年的1月1日的中午12点执行：`0 0 12 1 1 *`
-->
<template>
  <div>
    <div class="wrapBox">
      <!-- 按分钟 -->
      <template v-if="timeType == 'tt'">
        <a-space>
          <span>{{ defaultHourTime.join("~") }}</span>
          <span class="mr-2 ml-2">每间隔{{ intervalueMinute }}分钟 </span>
        </a-space>
      </template>
      <!-- 按小时 -->
      <template v-if="timeType == 'hh'">
        <span v-if="appoint === '0'">
          <span>{{ defaultHourTime.join("~") }}</span>
          <span class="mr-2 ml-2">每间隔{{ intervalueHour }}小时 </span>
        </span>
        <span v-if="appoint === '1'">
          <span>
            {{
              "每" +
              pointHours
                .map(
                  (week) =>
                    getHourList().find((option) => option.value == week)?.label
                )
                .filter(Boolean)
                .join(",")
            }}
          </span>
        </span>
      </template>
      <!-- 按日 -->
      <template v-if="timeType == 'dd'">
        <a-space>
          <span>每日</span>
          <span>
            {{ fixTime }}
          </span>
        </a-space>
      </template>
      <!-- 按周 -->
      <template v-if="timeType == 'ww'">
        <a-space>
          <span>
            {{
              "每周" +
              weekTimes
                .map(
                  (week) =>
                    weekOptions.find((option) => option.value == week)?.label
                )
                .filter(Boolean)
                .join(",")
            }}
          </span>
          <span>{{ fixTime }}</span>
        </a-space>
      </template>
      <!-- 按月 -->
      <template v-if="timeType == 'mm'">
        <a-space>
          <span>
            {{
              "每月" +
              dayTimes
                .map(
                  (week) =>
                    getMonth().find((option) => option.value == week)?.label
                )
                .filter(Boolean)
                .join(",")
            }}
          </span>
          <span>{{ fixTime }}</span>
        </a-space>
      </template>
      <!-- 按年 -->
      <template v-if="timeType == 'yy'">
        <a-space>
          <span>
            {{
              "每年" +
              monthTimes
                .map(
                  (week) =>
                    getYear().find((option) => option.value == week)?.label
                )
                .filter(Boolean)
                .join(",") +
              "," +
              dayTimes
                .map(
                  (week) =>
                    getMonth().find((option) => option.value == week)?.label
                )
                .filter(Boolean)
                .join(",")
            }}
          </span>
          <span>{{ fixTime }}</span>
        </a-space>
      </template>
    </div>
  </div>
</template>
<script setup name="Cycle">
import { ref, watch } from "vue";
import { weekOptions, getHourList, getMonth, getYear, splitFn } from "./const";

const emits = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: String,
    default: "00 00/5 00-23 * * ?",
  },
});

const defaultHourTime = ref(["00:00", "23:59"]);
const timeType = ref("tt");
const intervalueMinute = ref("5");
const appoint = ref("0");
const fixTime = ref("00:00");
const weekTimes = ref(["1"]);
const dayTimes = ref("1");
const pointHours = ref(["1"]);
const intervalueHour = ref("1");
const monthTimes = ref(["1"]);
watch(
  () => props.modelValue,
  (val) => {
    if (val) {
      console.log("val", val);
      setExpress(val);
    }
  },
  { immediate: true }
);

/**
 * 根据cron表达式反显到页面
 * @param {*} express
 */
function setExpress(express) {
  express = express || "* * * * * *";
  const crons = express.split(/\s+/);
  if (crons.length === 6) {
    let minuteCron = crons[1],
      hourCron = crons[2],
      dayCron = crons[3],
      weekCron = crons[4],
      yearCron = crons[5];
    if (minuteCron.split("/").length === 2) {
      // 按分钟
      timeType.value = "tt";
      intervalueMinute.value = minuteCron.split("/")[1];
      defaultHourTime.value[0] =
        hourCron.split("-")[0] + ":" + minuteCron.split("/")[0];
      defaultHourTime.value[1] = hourCron.split("-")[1] + ":59";
      return;
    }
    if (hourCron.split("/").length === 2) {
      // 按小时
      timeType.value = "hh";
      appoint.value = "0";
      intervalueHour.value = hourCron.split("/")[1];
      defaultHourTime.value[0] =
        hourCron.split("-")[0] + ":" + minuteCron.split("/")[0];
      defaultHourTime.value[1] = hourCron.split("/")[0].split("-")[1] + ":59";
      return;
    }
    if (dayCron === "*") {
      // 按日,判断当前是哪个timeType
      if (
        hourCron.split(",").length > 1 ||
        hourCron == "0" ||
        (hourCron !== "*" &&
          hourCron.length <= 2 &&
          !hourCron.startsWith("0") &&
          appoint.value === "1" &&
          timeType.value === "hh")
      ) {
        // 小时
        timeType.value = "hh";
        // 指定
        appoint.value = "1";
        pointHours.value = splitFn(hourCron, ",");
      } else {
        // 按日
        timeType.value = "dd";
        fixTime.value = hourCron + ":" + minuteCron;
      }
      return;
    }
    if (weekCron === "*") {
      if (dayCron == "?") {
        //按周
        timeType.value = "ww";
        fixTime.value = hourCron + ":" + minuteCron;
        weekTimes.value = splitFn(yearCron, ",");
      } else {
        //按月
        timeType.value = "mm";
        fixTime.value = hourCron + ":" + minuteCron;
        dayTimes.value = splitFn(dayCron, ",");
      }
      return;
    }
    if (yearCron === "?") {
      timeType.value = "yy";
      fixTime.value = hourCron + ":" + minuteCron;
      dayTimes.value = splitFn(dayCron, ",");
      monthTimes.value = weekCron.split(",") || weekCron;
      return;
    }
  }
}
</script>
